---
title: Dropdown Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-radix-dropdown-menu" />

## Installation

<ComponentInstallation name="components-radix-dropdown-menu" />

## Usage

```tsx
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>

  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>

    <DropdownMenuSeparator />

    <DropdownMenuGroup>
      <DropdownMenuItem>
        <span>Profile</span>
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <span>Billing</span>
        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <span>Settings</span>
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <span>Keyboard shortcuts</span>
        <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>

    <DropdownMenuSeparator />

    <DropdownMenuGroup>
      <DropdownMenuItem>
        <span>Team</span>
      </DropdownMenuItem>

      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          <span>Invite users</span>
          <ChevronRight />
        </DropdownMenuSubTrigger>

        <DropdownMenuSubContent>
          <DropdownMenuItem>
            <span>Email</span>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <span>Message</span>
          </DropdownMenuItem>

          <DropdownMenuSeparator />

          <DropdownMenuItem>
            <span>More...</span>
          </DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>

      <DropdownMenuItem>
        <span>New Team</span>
        <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>

    <DropdownMenuSeparator />

    <DropdownMenuItem>
      <span>Log out</span>
      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

## Examples

### Dropdown Menu Checkbox

<ComponentPreview name="demo-components-radix-dropdown-menu-checkbox" />

### Dropdown Menu Radio

<ComponentPreview name="demo-components-radix-dropdown-menu-radio" />

## API Reference

### DropdownMenu

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenu"
  text="Animate UI API Reference - DropdownMenu Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#root"
  text="Radix UI API Reference - DropdownMenu.Root"
/>
</div>

### DropdownMenuTrigger

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenutrigger"
  text="Animate UI API Reference - DropdownMenuTrigger Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#trigger"
  text="Radix UI API Reference - DropdownMenu.Trigger"
/>
</div>

### DropdownMenuContent

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenucontent"
  text="Animate UI API Reference - DropdownMenuContent Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content"
  text="Radix UI API Reference - DropdownMenu.Content"
/>
</div>

<TypeTable
  type={{
    sideOffset: {
      description: 'The offset of the dropdown menu content.',
      type: 'number',
      required: false,
      default: '4',
    },
    container: {
      description: 'Specify a container element to portal the content into.',
      type: 'HTMLElement',
      required: false,
      default: 'document.body',
    },
    transition: {
      description: 'The transition of the dropdown menu content',
      type: 'Transition',
      required: false,
      default: '{ duration: 0.2 }',
    },
    '...props': {
      description: 'The props of the dropdown menu content.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `forceMount` and `asChild` properties are not supported in the
  `DropdownMenuContent` component, as it is used for animation.
</Callout>

### DropdownMenuLabel

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenulabel"
  text="Animate UI API Reference - DropdownMenuLabel Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#label"
  text="Radix UI API Reference - DropdownMenu.Label"
/>
</div>

### DropdownMenuSeparator

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuseparator"
  text="Animate UI API Reference - DropdownMenuSeparator Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#separator"
  text="Radix UI API Reference - DropdownMenu.Separator"
/>
</div>

### DropdownMenuGroup

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuhighlight"
  text="Animate UI API Reference - DropdownMenuHighlight Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#group"
  text="Radix UI API Reference - DropdownMenu.Group"
/>
</div>

### DropdownMenuItem

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuitem"
  text="Animate UI API Reference - DropdownMenuItem Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item"
  text="Radix UI API Reference - DropdownMenu.Item"
/>
</div>

<TypeTable
  type={{
    variant: {
      description: 'The variant of the dropdown menu item.',
      type: 'default' | 'destructive',
      required: false,
      default: 'default',
    },
    inset: {
      description: 'Whether the dropdown menu item is inset.',
      type: 'boolean',
      default: false,
      required: false,
    },
  }}
/>

### DropdownMenuItemIndicator

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuitemindicator"
  text="Animate UI API Reference - DropdownMenuItemIndicator Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#itemindicator"
  text="Radix UI API Reference - DropdownMenu.ItemIndicator"
/>
</div>

### DropdownMenuCheckboxItem

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenucheckboxitem"
  text="Animate UI API Reference - DropdownMenuCheckboxItem Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#checkboxitem"
  text="Radix UI API Reference - DropdownMenu.CheckboxItem"
/>
</div>

### DropdownMenuRadioGroup

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuradiogroup"
  text="Animate UI API Reference - DropdownMenuRadioGroup Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radiogroup"
  text="Radix UI API Reference - DropdownMenu.RadioGroup"
/>
</div>

### DropdownMenuRadioItem

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuradioitem"
  text="Animate UI API Reference - DropdownMenuRadioItem Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radioitem"
  text="Radix UI API Reference - DropdownMenu.RadioItem"
/>
</div>

### DropdownMenuShortcut

<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenushortcut"
  text="Animate UI API Reference - DropdownMenuShortcut Primitive"
/>

<TypeTable
  type={{
    '...props': {
      description: 'The props of the dropdown menu shortcut.',
      type: 'React.ComponentProps<"span">',
      required: false,
    },
  }}
/>

### DropdownMenuSub

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenusub"
  text="Animate UI API Reference - DropdownMenuSub Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub"
  text="Radix UI API Reference - DropdownMenu.Sub"
/>
</div>

### DropdownMenuSubTrigger

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenusubtrigger"
  text="Animate UI API Reference - DropdownMenuSubTrigger Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subtrigger"
  text="Radix UI API Reference - DropdownMenu.SubTrigger"
/>
</div>

### DropdownMenuSubContent

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenusubcontent"
  text="Animate UI API Reference - DropdownMenuSubContent Primitive"
/>

<ExternalLink
  href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subcontent"
  text="Radix UI API Reference - DropdownMenu.SubContent"
/>
</div>

<TypeTable
  type={{
    transition: {
      description: 'The transition of the dropdown menu',
      type: 'Transition',
      required: false,
      default: '{ duration: 0.2 }',
    },
    '...props': {
      description: 'The props of the dropdown menu sub content.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `forceMount` and `asChild` properties are not supported in the
  `DropdownMenuSubContent` component, as it is used for animation.
</Callout>

## Credits

- [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/dropdown-menu) for style inspiration.
